import React from 'react';
import type { DragDropState } from '../hooks/useDragDrop';
import styles from '../styles/DragPreview.module.css';

interface DragPreviewProps {
  dragState: DragDropState;
  config: {
    cellWidth: number;
    cellHeight: number;
  };
}

const DragPreview: React.FC<DragPreviewProps> = ({ dragState, config }) => {
  if (!dragState.isDragging || !dragState.dragData) return null;

  const { dragData, dropTarget, canDrop } = dragState;

  // 计算预览位置
  const previewStyle = {
    left: dragData.currentX - dragData.offset.x,
    top: dragData.currentY - dragData.offset.y,
    width: config.cellWidth,
    height: config.cellHeight,
  };

  return (
    <>
      {/* 拖拽预览框 */}
      <div
        className={`${styles.dragPreview} ${
          canDrop ? styles.validDrop : styles.invalidDrop
        }`}
        style={previewStyle}
      >
        <div className={styles.roomNumber}>
          {dragData.sourceRoom.roomNumber}
        </div>
        <div className={styles.roomType}>
          {getRoomTypeLabel(dragData.sourceRoom.roomType)}
        </div>
        <div className={styles.dragIcon}>{canDrop ? '✓' : '✗'}</div>
      </div>

      {/* 拖拽状态提示 */}
      <div
        className={styles.dragTooltip}
        style={{
          left: dragData.currentX + 15,
          top: dragData.currentY - 40,
        }}
      >
        <div className={styles.tooltipContent}>
          <div className={styles.sourceInfo}>
            📤 {dragData.sourceRoom.roomNumber} ({dragData.sourceDate})
          </div>
          {dropTarget && (
            <div
              className={`${styles.targetInfo} ${
                canDrop ? styles.validTarget : styles.invalidTarget
              }`}
            >
              📥 {dropTarget.room.roomNumber} ({dropTarget.date})
              {!canDrop && dropTarget.reason && (
                <div className={styles.errorReason}>⚠️ {dropTarget.reason}</div>
              )}
            </div>
          )}
          <div className={styles.instructions}>
            {canDrop
              ? '松开鼠标完成移动'
              : dropTarget
                ? '目标位置不可用'
                : '拖拽到目标位置'}
          </div>
        </div>
      </div>

      {/* 全局拖拽遮罩 */}
      <div className={styles.dragOverlay} />
    </>
  );
};

// 获取房间类型标签
const getRoomTypeLabel = (roomType: string): string => {
  const labels: Record<string, string> = {
    standard_single: '标准单人间',
    deluxe_king: '豪华大床房',
    executive_suite: '行政套房',
  };
  return labels[roomType] || roomType;
};

export default DragPreview;
